<template>
    <div class="order-item">
        <order-item-title :item-data="getTitleData" />
        <order-item-info :item-data="getInfoData" />
        <order-item-btn :item-data="getfooterData" />
    </div>
</template>


<script setup>
import orderItemTitle from '../order-item-title/order-item-title.vue';
import orderItemInfo from '../order-item-info/order-item-info.vue';
import orderItemBtn from '../order-item-btn/order-item-btn.vue';
import { computed } from 'vue';

const props = defineProps({
    itemData: {
        type: Object,
        default: () => ({})
    }
})

// 获取title数据
const getTitleData = computed(() => {
    let data = props.itemData;
    // 处理数据
    return {
        unitName: data.unitName,
        orderStatusDesc: data.orderStatusDesc,
        orderStatus: data.orderStatus,
        orderStatusDescColor: data.orderStatusDescColor,
        cancelReasonDesc: data.cancelReasonDesc
    }
})

// 获取info数据
const getInfoData = computed(() => {
    let data = props.itemData;
    // 处理数据
    return {
        checkInDate: data.checkInDate,
        checkOutDate: data.checkOutDate,
        checkInLatestTime: data.checkInLatestTime,
        checkOutLatestTime: data.checkOutLatestTime,
        prepayAmount: data.prepayAmount,
        unitPicture: data.unitPicture
    }
})

// 获取footer数据
const getfooterData = computed(() => {
    let data = props.itemData;
    // 处理数据
    return {
        countdown: data.countdown,   // 剩余支付秒--倒计时
        orderStatusDesc: data.orderStatusDesc,
        orderStatus: data.orderStatus,  // 订单状态 0取消 1待支付
        summary: data.summary,
    }
})


</script>


<style lang="less" scoped>
.order-item {
    padding: 0 20px;
    background-color: #fff;
    margin-top: 10px;
}
</style>